<template>
  <section style="margin: 0 140px;">
    <div class="title">
      <el-row>
        <el-col :span="1">
          <img src="../assets/icon_movie.png" class="icon">
        </el-col>
        <el-col :span="22">
          <div class="title_name">{{videoList.title}}</div>
        </el-col>
        <el-col :span="1">
          <el-button type="text" class="more" @click="more(videoList.type_id, videoList.title)">更多<i class="el-icon-d-arrow-right"></i></el-button>
        </el-col>
      </el-row>
    </div>
    <div class="movie_list">
      <div v-for="(item,index) in videoList.date" :key="index" class="movie_item">
        <el-tooltip class="item" effect="dark" :content="item.v_introduction" placement="left">
          <div class="img_item" @click="toVideoMsg(item.v_id)">
            <el-image :src="item.v_cover" class="movie_img"  lazy>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <i class="el-icon-caret-right" style="position: relative;top: -200px;"></i>
          </div>
        </el-tooltip>
        <div class="movie_name">
          {{item.v_title}}
        </div>
      </div>
    </div>
  </section>
</template>

<script>
    export default {
        name: "home-item",
        props:{
            videoList:{
                Type: Object,
                default: () => {}
            }
        },
        data(){
            return{
            };
        },
        mounted() {
            for(var i = 0;i<this.videoList.date;i++){
                this.videoList.date[i].v_introduction = this.videoList.date[i].v_introduction.replace(/\\n/gm,"\n");
            }
        },
        methods:{
            more:function (id, title) {
                this.$router.push({ path:'/videoList?id='+id})
                document.title = title;
            },
            toVideoMsg:function (id) {
                this.$router.push({ path:'/videoMsg?id='+id})
            }
        }
    }
</script>

<style>
  .title{
    width: 100%;
    height: 54px;
    border-bottom: 1px solid #ffffff;
    text-align: left;
  }
  .movie_list{
    height: 700px;
    margin-top: 5px;
  }

  .icon{
    width: 40px;
    height: 40px;
    margin: 7px;
  }

  .title_name{
    color: white;
    font-size: 30px;
    margin-top: 4px;
    margin-left: 10px;
    font-weight: bold;
  }

  .more{
    color: #fff;
    transition: 0.6s;
    cursor:pointer;
    margin-top: 4px;
  }

  .more:hover{
    color: #d88930;
  }

  .movie_item:hover img{
    transform: scale(1.2);
  }

  .movie_item{
    width: 20%;
    height: 300px;
    float: left;
    margin-top: 40px;
  }

  .movie_img img{
    width: 200px;
    height: 300px;
    border-radius: 5px;
    transition: 0.9s;
  }

  .img_item{
    text-align: center;
    color: #0000;
    height: 300px;
    font-size: 60px;
    float: left;
  }
  .img_item:hover{
    color: #fff;
    transition: 0.9s;
  }

  .movie_name{
    color: white;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
  }

  .el-tooltip__popper{
    white-space: pre-line;
    width: 300px;
    height: 300px;
    overflow: hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 22;
  }
</style>
